<template>
  <div>
   <Header :types=2 />
<div style="display: flex;justify-items: center;">
  <div style="width: 100px; border-right: 1px solid rgba(136, 137, 138, .3); position: fixed; top: 50px; left: 0; z-index: 99; overflow-y: auto; max-height: calc(100vh - 50px);">
  <div v-for="(item, index) in fenleilist.data" :key="index" class="fenleiliststyle" :class="{ activefile: isActive(item) }" @click="handleClick(item)">
    <div v-if="activeIndex == item.id" style="width: 3px; height: 8px; background: #FF7500; box-shadow: 1px 1px 3px 0px rgba(255,64,0,0.24); border-radius: 2px;"></div>
    <div style="margin-left: 5px;">{{ item.name }}</div>
  </div>
</div>
<div style="width:100px;"></div>
<div style="width: 74%;display:flex ;">
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="width: 90%;margin: 0 auto;">
     <van-cell style="background:none;padding: 0;margin:0" v-if="activeIndex==0">
      <van-swipe :autoplay="3000"  style="width:100%">
        <van-swipe-item
          v-for="(item, index) in  gamecontent?.data.slice(0, 3)"  :key="index"  style="" @click="gogamelist(item.id)">
          <div class="filsist">
             <img :src="item?.image" alt="" style="height: 130px;width:100%;border-top-left-radius: 12px;border-top-right-radius: 12px;object-fit: cover;">
              <div  style="display: flex;align-items: center;margin-left: 16px;">
              <img :src="item?.icon" alt="" style="width: 36px;height: 36px;border-radius: 8px 8px 8px 8px;border: 1px solid rgba(0,0,0,0.05);">
              <div style="margin-left: 12px;">
                <div style="font-weight: bold;font-size: 14px;color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; width: 5.25rem;white-space: nowrap;">{{ item?.name }}</div>
                <div class="item-point">
                  <img
                    src="~/static/index/mixed.png"
                    alt=""
                    class="point-icon"
                  />
                  <div class="point-value">{{ item?.point }}</div>
                </div>
              </div>
              <div style="width: 48px;height: 22px;border-radius:68px;border: 1px solid #2E3033;line-height: 22px;text-align: center;font-size: 12px;color: #47494D;font-weight: bold;margin-left: 20px;">详情</div>
              </div>
             </div>
        </van-swipe-item>
        <template #indicator>
    <div ></div>
  </template>
      </van-swipe>
    </van-cell>
        <van-cell v-for="(item,index) in gamecontent?.data.slice(3)"   style="background:none;padding: 0;margin:20px 0" @click="gogamelist(item.id)"  v-if="activeIndex==0" >
             <div class="filsist">
             <img :src="item?.image" alt="" style="height: 130px;width:100%;border-top-left-radius: 12px;border-top-right-radius: 12px;object-fit: cover;">
              <div  style="display: flex;align-items: center;margin-left: 16px;">
              <img :src="item?.icon" alt="" style="width: 36px;height: 36px;border-radius: 8px 8px 8px 8px;border: 1px solid rgba(0,0,0,0.05);">
              <div style="margin-left: 12px;">
                <div style="font-weight: bold;font-size: 14px;color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; width: 5.25rem;white-space: nowrap;">{{ item?.name }}</div>
                <div class="item-point">
                  <img
                    src="~/static/index/mixed.png"
                    alt=""
                    class="point-icon"
                  />
                  <div class="point-value">{{ item?.point }}</div>
                </div>
              </div>
              <div style="width: 48px;height: 22px;border-radius:68px;border: 1px solid #2E3033;line-height: 22px;text-align: center;font-size: 12px;color: #47494D;font-weight: bold;margin-left: 20px;">详情</div>
              </div>
             </div>
            </van-cell>
            <van-cell v-for="(item,index) in uniqueGameContent"  style="background:none;padding: 0;margin:12px 0" @click="gogamelist(item.id)"  v-if="activeIndex!=0">
                <div style="display: flex;">
                <img :src="item.icon" alt="" style="width: 60px;height: 60px;border-radius: 12px;">
                <div style="margin-left: 12px;">
                  <div  style="display: flex;align-items: center;">
                  <div style="font-weight: bold;font-size: 14px;color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; width: 5.25rem;white-space: nowrap;">{{ item?.name }}</div>
                  <div v-if="item.zhekou" style="width: 69px;height: 14px;background: rgba(229,92,103,0.1);border-radius:4px;line-height: 14px;font-size: 7px;text-align: center;color: #E55C67;">充值|尽享{{item.zhekou}}</div>
                </div>
                <div style="display: flex;align-items: center;white-space: nowrap;   overflow: hidden; text-overflow: ellipsis; width: 170px">
                  <div
                    v-for="(item1, index1) in item.biaoqian"
                    :key="index1"
                    style="  font-size: .8125rem;   color: #aeb0b3;"
                  >
                    {{ item1 }}
                    <span
                      v-if="index1 < item.biaoqian.length - 1"
                      style="margin: 0 .25rem; font-weight: bold"
                      >&middot;</span
                    >
                  </div>
                </div>
                <div class="item-point">
                  <img
                    src="~/static/index/mixed.png"
                    alt=""
                    class="point-icon"
                  />
                  <div class="point-value">{{ item.point }}</div>
                </div>
                </div>
                </div>
            </van-cell>
      </van-list>
</div>
</div>
   <!-- <iframe :src="`${this.$domain}/m/zhaoyouxi/`" frameborder="0" style="width:100%;height:750px;border:none;"></iframe> -->
   <BottomTab  :types=0 />
  </div>
</template>

<script>
import Header from '~/components/header.vue';
import BottomTab from '~/components/footer.vue';
export default {
    components: {
    Header,
    BottomTab
  },
  computed: {
        uniqueGameContent() {
            if (!this.gamecontent?.data) return [];
            const uniqueIds = new Set();
            return this.gamecontent.data.filter(item => {
                if (!uniqueIds.has(item.id)) {
                    uniqueIds.add(item.id);
                    return true;
                }
                return false;
            });
        }
    },
  data() {
    return {
      fenleilist: "",
      activeIndex:0,
      gamecontent:'',
      page: 1,
      t: '',
      textToHash: '',
      uid: '',
      loading: false,
      finished: false,
    };
  },
  head() {
    return {
      title: this.gamecontent.seos.title, // 动态标题
      meta: [
        { hid: 'description', name: 'description', content: this.gamecontent.seos.description}, // 描述
        { hid: 'keywords', name: 'keywords', content: this.gamecontent.seos.keywords} // 关键词
      ]
    }
  },
  async asyncData({ params, $axios, route }) {
    const queryParams = {
        ct: 'app',
        ac: 'fenlei',
    };
    const queryParams2 = {
        ct: 'app',
        ac: 'fenlei_game',
        fenlei_id:route.params.id,
        type:route.params.id,
        p:1
    };
    const [response, response2] = await Promise.all([
        $axios.get('', { params: queryParams }),
        $axios.get('', { params: queryParams2 }),
    ]);

    return { fenleilist: response.data, gamecontent: response2.data };
}, 
 async mounted() {
  if(this.$route.params.id){
    this.activeIndex = this.$route.params.id; 
  }
    const isAppleDevice =
      /iPad|iPhone|iPod/.test(navigator.userAgent) ||
      !!navigator.platform.match(/Mac/);
    if (isAppleDevice) {
      try {
        const queryParams = {
        ct: 'app',
        ac: 'fenlei',
    };
    const queryParams2 = {
        ct: 'app',
        ac: 'fenlei_game',
        fenlei_id:this.activeIndex,
        type:this.activeIndex,
        p:1
    };
    const [response, response2] = await Promise.all([
    this.$axios.get('', { params: queryParams }),
    this.$axios.get('', { params: queryParams2 }),
    ]);
    return { fenleilist: response.data, gamecontent: response2.data };
      } catch (error) {
     
      }
    }
  },
methods: {
  gogamelist(e){
    this.$router.push({
        path: `/shouyou/${e}.html`,
      });
  },
  onLoad() {
      setTimeout(() => {
        if (this.page <= this.gamecontent.max_p) {
          this.page++;
          this.gamemost()
        } else {
          this.finished = true;
        }
      }, 0);
    },
    isActive(item) {

      return this.activeIndex == item.id;
    },
    handleClick(item) {
      // this.activeIndex = item.id; 
      // this.gamecontent.data = [];
      // this.page = 1;
      this.$router.push(`/indexsearch_0_${item.id}_0_0.html`);
      //  this.gamemost()
    },
      gamemost(){
      const params = {
        ct: 'app',
        ac: 'fenlei_game',
        fenlei_id:this.activeIndex,
        type:this.activeIndex,
        p:this.page,
    };
   this.$axios.get('', { params }).then(response => {
             if(this.page == 1){
        this.gamecontent = response.data;
      }else{
               this.gamecontent.data =    this.gamecontent.data.concat(response.data.data);
               this.loading = false;
      }
   });


    },
  }
}
</script>
<style>
body {
  background: #f7f8fa;
  font-size: 16px;
  /* 默认字体大小 */
}</style>
<style coped>
  .fenleiliststyle{
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px;
  }
  .activefile{
    color: #FF7500;
    font-weight: bold;
    background: linear-gradient( 270deg, rgba(242,120,16,0) 24%, rgba(242,120,16,0.12) 100%);
  }
   .filsist{
    width: calc(100% - 10px);
height: 194px;
box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.04);
border-radius:12px;
background: #FFFFFF;
   }
   .item-point {
  display: flex;
  align-items: center;
  height: 16px;
}

.point-icon {
  width: 1rem;
  height: 1rem;
}

.point-value {
  color: #ff7500;
  font-size: .75rem;
}
.van-cell {
    position: static;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
</style>